body {
  margin: 0;
  padding: 0;
  display: flex;
  place-items: center;
  min-width: 320px;
  min-height: 100vh;
}

* {
  font-family: Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,SimSun,sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
@themeColor: #409EFF;

/*选中文字，配合主题色*/
::selection {background: @themeColor;color:#FFFFFF;}
::-moz-selection {background: @themeColor;color:#FFFFFF;}
::-webkit-selection {background: @themeColor;color:#FFFFFF;}


#app {
  width: 100%;
  min-height: 100%;
}

/* 不能选中元素 */
.unselect {
  -moz-user-select: none; /* Firefox私有属性 */
  -webkit-user-select: none; /* WebKit内核私有属性 */
  -ms-user-select: none; /* IE私有属性(IE10及以后) */
  -khtml-user-select: none; /* KHTML内核私有属性 */
  -o-user-select: none; /* Opera私有属性 */
  user-select: none; /* CSS3属性 */
}

.my-class {
  font-size: 30px;
  color: red;
}

// 过渡动画
.fade-enter-active,.fade-leave-active {transition: all .3s ease;}
.fade-enter,.fade-leave-to{opacity: 0;}

.fade-up-enter-active,.fade-up-leave-active {transition: all .3s ease;}
.fade-up-enter{transform: translateY(-30px);opacity: 0;}
.fade-up-leave-to{opacity: 0;}


.appicon-show-enter-active,.appicon-show-leave-active {transition: all .5s ease;}
.appicon-show-enter,.appicon-show-leave-to{transform: translateX(-30px);opacity: 0;}

.desktoptask-show-enter-active,.desktoptask-show-leave-active {transition: all .5s ease;}
.desktoptask-show-enter{transform: translateY(36px);}
.desktoptask-show-leave-to{transform: translateY(15px);opacity: 0;}

.menu-show-enter-active,.menu-show-leave-active {transition: all .3s ease;}
.menu-show-enter,.menu-show-leave-to{transform: translateY(30px);opacity: 0;}

.context-ani-enter-active,.context-ani-leave-active {transition: all .2s ease;}
.context-ani-enter{transform: translateX(10px);opacity: 0;}
.context-ani-leave-to{opacity: 0;}

.notice-ani-enter-active,.notice-ani-leave-active {transition: all .3s ease;}
.notice-ani-enter,.notice-ani-leave-to{opacity: 0;}

.allprogram-enter-active,.allprogram-leave-active {transition: all 1s ease;}
.allprogram-enter{transform: translateX(-40px);opacity: 0;}
.allprogram-leave-to{transform: translateX(-25px);opacity: 0;}

.favoriteapp-show-enter-active,.favoriteapp-show-leave-active {transition: all 1s ease;}
.favoriteapp-show-enter{transform: translateY(36px);}
.favoriteapp-show-leave-to{transform: translateY(25px);opacity: 0;}

/*AB页面动画的时间*/
.fade-left-leave-active,.fade-left-enter-active {transition: all .4s ease;}
/*B页面进入前的初始状态*/
.fade-left-enter{transform: translateX(30px);opacity: 0;}
/*A页面离开后的最终状态*/
.fade-left-leave-to{transform: translateX(-10px);opacity: 0;}

.slide-fade-enter-active,.slide-fade-leave-active {transition: all .3s ease;}
.slide-fade-enter, .slide-fade-leave-to{transform: translateY(30px);opacity: 0;}


.widow-close-enter-active, .widow-close-leave-active { transition: all 0.3s ease; }
.widow-close-enter { transform: translateY(-30px); transform: rotateY(10deg); opacity: 0; }
.widow-close-leave-to { opacity: 0; }


.widow-close-enter-active,.widow-close-leave-active {transition: all .3s ease;}
.widow-close-enter{transform: translateY(-30px);transform: rotateY(10deg);opacity: 0;}
.widow-close-leave-to{opacity: 0;}

.morefunc-show-enter-active,.morefunc-show-leave-active {transition: all .3s ease;}
.morefunc-show-enter,.morefunc-show-leave-to{opacity: 0;}

/******************通用样式-直接使用*****************************/
/*标题蓝色*/
.title-bar{
  display: block;
  height: 24px;
  margin-left: 10px;
  margin-top: 5px;
  margin-bottom: 5px;
  padding-left: 10px;
  font-size: 13px;
  font-weight: 500;
  line-height: 24px;
  border-left: 2px solid @themeColor;
  color: @themeColor;
  background-position: 50px 0;
  background: linear-gradient(90deg, #fff, #ffe 20px, #fff 100px, #fff);
}
